import {
    AfterViewInit,
    Component,
    ElementRef,
    Injector,
    Input,
    ViewEncapsulation,
    OnInit,
} from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { PipelineAndActsListDto } from '@shared/service-proxies/service-proxies';

@Component({
    selector: 'flex-timeline-item',
    templateUrl: './flex-timeline-item.component.html',
    styleUrls: ['./flex-timeline-item.component.less'],
    encapsulation: ViewEncapsulation.None,
    animations: [appModuleAnimation()],
})
export class FlexTimelineItemComponent extends AppComponentBase
    implements OnInit {
    _pipe = new PipelineAndActsListDto();
    currentComponents = new Array();

    viewActCount = 15;
    firstIdx = 1;
    lastIdx = this.viewActCount;
    length = 1;
    currentComponentIdx = 1;

    colorConfig = {
        工艺类: 'm--bg-gy',
        质量类: 'm--bg-zl',
        成本类: 'm--bg-cb',
        原材料: 'm--bg-yl',
        任务类: 'm--bg-rw',
        工序执行类: 'm--bg-gxzx',
        任务执行类: 'm--bg-rwzx',
    };

    @Input()
    get pipe() {
        return this._pipe;
    }

    set pipe(val) {
        this._pipe = val;
        this.length = val.acts.length;
    }

    constructor(injector: Injector, private _element: ElementRef) {
        super(injector);
    }

    ngOnInit(): void {
        let pipeCount = this._pipe.acts.length;

        let currentComponent = this._pipe.acts.filter((el) => {
            return el.isCurrent;
        });

        this.currentComponentIdx = 1;
        if (currentComponent.length > 0) {
            this.currentComponentIdx = currentComponent[0].seq;
        }

        if (pipeCount <= this.viewActCount) {
            this.firstIdx = 1;
            this.lastIdx = this._pipe.acts.length;
        } else {
            if (this.currentComponentIdx <= Math.ceil(this.viewActCount / 2)) {
                this.firstIdx = 1;
            } else {
                this.firstIdx =
                    this.currentComponentIdx -
                    Math.floor(this.viewActCount / 2);
            }

            this.lastIdx = this.firstIdx + this.viewActCount - 1;
        }

        this.getCurrentComponents();
    }

    onComponentClick(event, component) {
        let componentElement = event.target.closest('.flex-component');
        let componentElements = componentElement
            .closest('.flex-pipe')
            .find('.flex-component');

        if (componentElement.hasClass('component-active')) {
            componentElement.removeClass('component-active');
        } else {
            componentElements.removeClass('component-active');
            componentElement.addClass('component-active');
        }

        let flag = component.isCurrent;

        this._pipe.acts.forEach((el) => {
            el.isCurrent = false;
        });

        component.isCurrent = !flag;
    }

    onPrevClick(event) {
        this.firstIdx--;
        this.lastIdx--;
        this.getCurrentComponents();
    }

    onNextClick(event) {
        this.firstIdx++;
        this.lastIdx++;
        this.getCurrentComponents();
    }

    getCurrentComponents() {
        this.currentComponents = this._pipe.acts.filter((el) => {
            return el.seq >= this.firstIdx && el.seq <= this.lastIdx;
        });
    }
}
